<template>
  <div class="container">
    <div class="main">
      <h2>简易问答机器人</h2>
      <div>
        <p class="describe">
          <span>输入</span>
          <button class="button" @click="handleClick" :disabled="!message">
            发送
          </button>
        </p>
        <div>
          <textarea
            class="textarea message"
            v-model="message"
            placeholder="请输入"
          ></textarea>
        </div>
      </div>
      <div>
        <p class="describe">
          <span>输出</span>
        </p>
        <div class="message">{{ result }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Home",
};
</script>

<script setup lang="ts">
import { ref } from "vue";
import { getMessage } from "@/api/gpt";

const message = ref("");
const result = ref("来和我对话吧！");

const handleClick = function () {
  result.value = "加载中...";
  getMessage(message.value).then((res) => {
    console.log(res);
    result.value = res.data.content;
  });
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("@/assets/images/bg.png");
  background-size: cover;
}
.main {
  width: 70%;
  height: 80%;
  background: rgba(30, 30, 30, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 25px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
}
.main > * {
  width: 85%;
  margin: 20px auto;
}
.main > h2 {
  text-align: center;
  color: white;
}
.main .describe {
  display: flex;
  justify-content: space-between;
}
.main .describe span {
  font-size: 18px;
  font-weight: bold;
}
.main .button {
  width: 60px;
  height: 30px;
  border: 2px solid gray;
  border-radius: 5px;
  cursor: pointer;
}
.main .button:hover {
  background: gray;
  color: white;
}
.main .button:disabled {
  background: #cccccc;
  color: black;
}
.textarea {
  resize: none;
}
.textarea:focus {
  outline: none;
}
.message {
  box-sizing: border-box;
  width: 100%;
  height: 385px;
  line-height: 1.5em;
  border: 2px solid grey;
  border-radius: 10px;
  padding: 10px;
  font-family: Microsoft Yahei, serif;
  font-size: 18px;
  overflow-y: auto;
  background-color: white;
}
</style>
